<template>
	<!-- 
    引入animate.css: yarn add animate.css
    在main.js中引入:import animate.css
   -->

	<div>
		<h1>Header动画</h1>
		<button @click="go">动画</button>
		<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
		>
			<div id="good" v-show="isShow"></div>
		</transition>

		<button @click="isShow = !isShow">显示/隐藏元素</button>
		<transition
			enter-active-class="animate__fadeInDown"
			leave-active-class="animate__fadeOutDown"
		>
			<div class="box animate__animated" v-show="isShow">我是动画效果展示</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: "App",
	data() {
		return {
			isShow: true,
		};
	},

	methods: {
		go() {
			this.isShow = !this.isShow;
		},
		beforeEnter(el) {
			el.style.transform = "translate(0,0)";
			console.log(2);
		},
		enter(el, done) {
			el.offsetWidth;
			el.style.transform = "translate(200px,200px)";
			el.style.transition = "all .7s ease-in";
			console.log(3);
			done();
		},
		afterEnter(el) {
			this.isShow = !this.isShow;
		},
	},
};
</script>

<style scoped>
.box {
	width: 200px;
	height: 200px;
	background: tomato;
}
#good {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: palevioletred;
}
</style>
